<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>待办事项 - 添加功能</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      body {
        background-color: #2c3e50;
        color: #ecf0f1;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding: 20px;
        margin: 0;
      }
      .app-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
      }
      .user-avatar {
        width: 50px;
        height: 50px;
        background-color: #3498db;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-right: 15px;
      }
      .stats-info {
        background-color: #34495e;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
      }
      .input-section {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
      }
      .task-input {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 6px;
        background-color: #34495e;
        color: #ecf0f1;
        outline: none;
        font-size: 16px;
      }
      .task-input::placeholder {
        color: #95a5a6;
      }
      .add-btn {
        padding: 12px 20px;
        border: none;
        border-radius: 6px;
        background-color: #e91e63;
        color: #fff;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s;
      }
      .add-btn:hover {
        background-color: #c2185b;
      }
      .priority-section {
        margin: 20px 0;
        background-color: #34495e;
        padding: 15px;
        border-radius: 8px;
      }
      .priority-options {
        display: flex;
        gap: 20px;
        margin-bottom: 10px;
      }
      .priority-options label {
        display: flex;
        align-items: center;
        cursor: pointer;
      }
      .priority-options input[type='radio'] {
        margin-right: 8px;
      }
      .task-list {
        margin-top: 20px;
      }
      .task-item {
        background-color: #34495e;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .task-content {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .priority-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
      }
      .priority-重要 {
        background-color: #e74c3c;
      }
      .priority-一般 {
        background-color: #3498db;
      }
      .priority-低 {
        background-color: #95a5a6;
      }
      .task-actions {
        display: flex;
        gap: 10px;
      }
      .edit-btn {
        padding: 6px 12px;
        border: none;
        border-radius: 4px;
        background-color: #9b59b6;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
      }
      .delete-btn {
        padding: 6px 12px;
        border: none;
        border-radius: 4px;
        background-color: #e74c3c;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
      }
      .error {
        color: #e74c3c;
        font-size: 14px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 应用头部 -->
      <div class="app-header">
        <div class="user-avatar">👤</div>
        <h1>{{title}}</h1>
      </div>

      <!-- 统计信息 -->
      <div class="stats-info">
        <p v-html="statsMessage"></p>
      </div>

      <!-- 任务输入区域 -->
      <div class="input-section">
        <input
          type="text"
          class="task-input"
          v-model="newTask"
          @keyup.enter="addTask"
          placeholder="把计划写下来吗?"
        />
        <button class="add-btn" @click="addTask">添加</button>
      </div>

      <!-- 错误提示 -->
      <div v-if="errorMessage" class="error">{{errorMessage}}</div>

      <!-- 优先级选择 -->
      <div class="priority-section">
        <div class="priority-options">
          <label>
            <input type="radio" value="重要" v-model="priority" />
            重要
          </label>
          <label>
            <input type="radio" value="一般" v-model="priority" />
            一般
          </label>
          <label>
            <input type="radio" value="低" v-model="priority" />
            低
          </label>
        </div>
        <div class="priority-display">任务优先级: {{priority}}</div>
      </div>

      <!-- 任务列表 -->
      <div class="task-list">
        <h3>任务列表</h3>
        <div v-if="tasks.length === 0" style="text-align: center; color: #95a5a6; padding: 20px">
          暂无任务，开始添加你的第一个待办事项吧！
        </div>
        <div v-else>
          <div v-for="(task, index) in tasks" :key="index" class="task-item">
            <div class="task-content">
              <div :class="`priority-indicator priority-${task.priority}`"></div>
              <span>{{task.text}}</span>
            </div>
            <div class="task-actions">
              <button class="edit-btn" @click="editTask(index)">编辑</button>
              <button class="delete-btn" @click="removeTask(index)">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      const { createApp, ref } = Vue

      const App = {
        setup() {
          const title = ref('你的待办事项')
          const statsMessage = ref(
            "<span style='color:#ffd700'>报告主人！你还有 <span style='color:#e74c3c'>0</span> 个待办事项未完成，有 <span style='color:#e74c3c'>0</span> 个已经过期了，有时间的话，赶紧去做吧。</span>"
          )
          const newTask = ref('')
          const priority = ref('一般')
          const tasks = ref([])
          const errorMessage = ref('')

          // 添加任务方法
          const addTask = () => {
            // 清除之前的错误信息
            errorMessage.value = ''

            // 验证输入
            if (newTask.value.trim() === '') {
              errorMessage.value = '请输入任务内容！'
              return
            }

            // 添加任务
            tasks.value.push({
              text: newTask.value.trim(),
              priority: priority.value,
              completed: false
            })

            // 清空输入框
            newTask.value = ''

            // 更新统计信息
            updateStats()

            // 显示成功信息
            console.log('任务添加成功！')
          }

          // 删除任务方法
          const removeTask = index => {
            if (confirm('确定要删除这个任务吗？')) {
              tasks.value.splice(index, 1)
              updateStats()
            }
          }

          // 编辑任务方法
          const editTask = index => {
            const newText = prompt('请输入新的任务内容：', tasks.value[index].text)
            if (newText && newText.trim() !== '') {
              tasks.value[index].text = newText.trim()
            }
          }

          // 更新统计信息
          const updateStats = () => {
            const totalTasks = tasks.value.length
            const overdueTasks = 0 // 这里可以根据实际需求计算过期任务
            statsMessage.value = `<span style='color:#ffd700'>报告主人！你还有 <span style='color:#e74c3c'>${totalTasks}</span> 个待办事项未完成，有 <span style='color:#e74c3c'>${overdueTasks}</span> 个已经过期了，有时间的话，赶紧去做吧。</span>`
          }

          return {
            title,
            statsMessage,
            newTask,
            priority,
            tasks,
            errorMessage,
            addTask,
            removeTask,
            editTask,
            updateStats
          }
        }
      }

      createApp(App).mount('#app')
    </script>
  </body>
</html>
